<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CorDova测试</title>
	<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<!--    <script type="text/javascript" src="WebP.js"></script>-->
	<script type="text/javascript" charset="utf-8">


		function onLoad() {
		    document.addEventListener("deviceready", onDeviceReady, false);
		}
		// device APIs are available
		function onDeviceReady() {
		    // Now safe to use device APIs
		    alert("onDeviceReady");
		}

		function callNative1(argument) {
			// body...
			alert('call nnative');
			cordova.exec(null,null,"TestPlugin","jsCallNativeWithOutCallBack",["1","2"]);
		}

		function nativeCallBack1Success(argument) {
			// body...
			alert('nativeCallBack1Success'+JSON.parse(argument));
		}

		function nativeCallBack1Fail(argument) {
			// body...
			alert('nativeCallBack1Fail'+JSON.parse(argument));
		}

		function callNative2(argument) {
			// body...
			cordova.exec(nativeCallBack1Success,nativeCallBack1Fail,"TestPlugin","isTest",["1","2"]);
		}

		function nativeCallJs(argument) {
			// body...
			alert('native call js ' + argument);
		}

		function wkJSCallHandle(argument) {
			// body...
			// 
			window.webkit.messageHandlers.TestPluginHandle.postMessage('wkJSCallHandle')
		}

		function wkJSCallNativeRegisterHandle(argument) {
			// body...
			alert('wkJSCallNativeRegisterHandle');
			cordova.exec(null,null,'TestPlugin','jsCallNativeRegisterScriptHandle',[1,2,3,4,5])
		}

		function callIframeAction(argument) {
			// body...
			// alert('callIframeAction');
			var iframe = document.createElement('iframe'); 
			iframe.src="//www.jb51.net";
			iframe.style.display='none';
			document.body.appendChild(iframe);
		}

		function applePaySuccess(argument) {
			// body...
			alert('applePaySuccess')
		}
		function applePayFail(argument) {
			// body...
			alert('applePayFail');
		}

		function callNativeApplePay(argument) {
			// body...
			cordova.exec(applePaySuccess,applePayFail,'TestPlugin','openApplePay',[1,2,4]);
		}
		// 银联支付
		function callNativeUnionPay(argument) {
			// body...
			cordova.exec(applePaySuccess,applePayFail,'LZAppMoneyPay','nativePay',["unionPay","unionApp","","http://101.231.204.84:8091/sim/getacptn"]);
		}
	</script>

	<style type="text/css">
		list-style:none; 
		.alignCenter{

		}

		.section{
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			width: 100%;
		}

		.ulCommon{
			list-style: none;
			width: 25%;
			padding: 0;
		}
		.webPContainer{
			width: 100%;
			height: 400px;
			background: #dae2e3;
		}
		.webPImage{
			width: 100%;
			height: 100%;
		}
	</style>

	<script type="text/javascript">
		function documentLocationReplace(argument) {
			// body...
            window.location.replace('https://www.baidu.com');
		}

		function downloadWebPImageSuccess(argument) {
			// body...
			// alert("downloadWebPImage success");
			var callBackParam = JSON.parse(argument);

			var data = callBackParam.data;

			var imageData = data.webPData

			var	webPElement = document.getElementsByClassName('webPImage');

			// webPElement[0].src = "http://isparta.github.io/compare-webp/image/png_webp/png/1.png"

			// webPElement[0].src = "data:image/jpg;base64," + imageData

			// console.log('imageData:'+imageData)

			webPElement[0].src = "http://www.etherdream.com/WebP/Test.webp"

		}

		function downloadWebPImageFail(argument) {
			// body...
			alert("downloadWebPImage fail");
		}

		function downloadWebPImage(argument) {
			// body...

			cordova.exec(downloadWebPImageSuccess,downloadWebPImageFail,'TestPlugin','loadWebPImageAction',['http://isparta.github.io/compare-webp/image/png_webp/webp_lossy75/1.webp','123'])
		}

		function navigationLeftButtonClick(argument) {
			// body...
			alert("navigationLeftButtonClick")
		}

		function manuSetNaviRightBarButton(argument) {
			// body...
			// cordova.exec(null,null,"");
			window.zzcjsbridge.base_customNavbarLeftButton({
				type:"back",
				success: function (response) {
        			alert(response);
        		},
        		text:"返回",
        		listener: function (response) {
        			alert('点击了左标题');
    			},
    			onClick:'navigationLeftButtonClick',
    			imageUrl:"http://isparta.github.io/compare-webp/image/png_webp/png_lossy75/4.png",
    			imageW:"44",
    			imageH:"44",
			});
		}
		
	</script>
</head>
<body onload="onLoad();">

	<div style="flex-wrap: wrap;display: flex;flex-direction: row;">
		<section class="section">
			<ul class="ulCommon">
				<li>
					<div ><button style="width: 100%;height: 88px;font-size: 20px;" onclick="callNative1()">调用原生无回调</button>
					</div>
				</li>

				<li>
					<div><button style="width: 100%;height: 88px;font-size: 20px;margin-top: 100px;" onclick="callNative2()">调用原生有回调</button>
					</div>
				</li>

				<li>
					<div><button style="width: 100%;height: 88px;font-size: 20px;margin-top: 100px;" onclick="wkJSCallNativeRegisterHandle()">调用原生注入scriptHandle</button>
					</div>
				</li>

				<li>
					<div><button style="width: 100%;height: 88px;font-size: 20px;margin-top: 100px;" onclick="wkJSCallHandle()">调用wkHandle</button>
					</div>
				</li>



			</ul>

			<ul class="ulCommon" style="display: flex;flex-direction: column;">
				<li style="align-self: center;"><a style="text-decoration: none;width: 100%;font-size: 40px;color: #929393;" href="https://www.baidu.com">跳转</a></li>

				<li style="align-self: center;display: flex;"><div><button style="width: 100%;height: 88px;font-size: 20px;margin-top: 100px;" onclick="callIframeAction()">发起iframe</button>
					</div></li>
			</ul>


			<ul class="ulCommon">
				<li>
					<div><button style="width: 100%;height: 88px;font-size: 20px;margin-top: 100px;" onclick="callNativeApplePay()">Apple Pay</button>
					</div>
				</li>

				<li>
					<div><button style="width: 100%;height: 88px;font-size: 20px;margin-top: 100px;" onclick="callNativeUnionPay()">银联支付</button>
					</div>
				</li>

				<li>
					<div><button style="width: 100%;height: 88px;font-size: 20px;margin-top: 100px;" onclick="documentLocationReplace()">location-replace</button>
					</div>
				</li>

				<li>
					<div><button style="width: 100%;height: 88px;font-size: 20px;margin-top: 100px;" onclick="downloadWebPImage()">loadWEBP图片</button>
					</div>
				</li>

								<li>
					<div><button style="width: 100%;height: 88px;font-size: 20px;margin-top: 100px;" onclick="manuSetNaviRightBarButton()">自定义导航栏右边按钮</button>
					</div>
				</li>

			</ul>
		</section>

		<div class="webPContainer">
			<img src="http://isparta.github.io/compare-webp/image/png_webp/webp_lossless/1.webp" class="webPImage">
		</div>
<!--       http://www.etherdream.com/WebP/Test.webp -->
        <img src="http://isparta.github.io/compare-webp/image/png_webp/webp_lossy75/4.webp" class="webPImage">
		
	</div>
</body>
</html>
